<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="head">
        <script type="text/javascript">
            //<![CDATA[
            function skinChart() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#007be5', '#20d077'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    lineWidth: 1,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }
            //]]>
        </script>
        <style type="text/css">
            .main-content {
                padding: 0;
            }
        </style>
    </ui:define>

    <ui:define name="topbar-title">Dashboard</ui:define>

    <ui:define name="content">
        <div class="ui-g ui-fluid dashboard">
            <div class="ui-g-12 ui-md-4">
                <div class="card clearfix summary">
                    <span class="title">Users</span>
                    <span class="detail">Number of visitors</span>
                    <span class="count visitors">12</span>
                </div>
            </div>
            <div class="ui-g-12 ui-md-4">
                <div class="card clearfix summary">
                    <span class="title">Sales</span>
                    <span class="detail">Number of purchases</span>
                    <span class="count purchases">534</span>
                </div>
            </div>
            <div class="ui-g-12 ui-md-4">
                <div class="card clearfix summary">
                    <span class="title">Revenue</span>
                    <span class="detail">Income for today</span>
                    <span class="count revenue">$3,200</span>
                </div>
            </div>

            <div class="ui-g-12 ui-md-6 ui-lg-3">
                <div class="highlight-box">
                    <div class="initials" style="background-color:#007be5;color:#00448f">TV</div>
                    <div class="card">
                        <span class="fa fa-eye"></span>
                        <span>Total Views</span>
                        <span class="count">523</span>
                    </div>
                </div>
            </div>
            <div class="ui-g-12 ui-md-6 ui-lg-3">
                <div class="highlight-box">
                    <div class="initials" style="background-color:#ef6262;color:#a83d3b">TI</div>
                    <div class="card">
                        <span class="fa fa-question-circle"></span>
                        <span>Total Issues</span>
                        <span class="count">81</span>
                    </div>
                </div>
            </div>
            <div class="ui-g-12 ui-md-6 ui-lg-3">
                <div class="highlight-box">
                    <div class="initials" style="background-color:#20d077;color:#038d4a">OI</div>
                    <div class="card">
                        <span class="fa fa-question-circle-o"></span>
                        <span>Open Issues</span>
                        <span class="count">21</span>
                    </div>
                </div>
            </div>
            <div class="ui-g-12 ui-md-6 ui-lg-3">
                <div class="highlight-box">
                    <div class="initials" style="background-color:#f9c851;color:#b58c2b">CI</div>
                    <div class="card">
                        <span class="fa fa-check"></span>
                        <span>Closed Issues</span>
                        <span class="count">60</span>
                    </div>
                </div>
            </div>

            <div class="ui-g-12 ui-md-6 ui-lg-4">
                <p:panel header="Tasks" style="height:100%">
                    <ul class="task-list">
                        <li>
                            <p:selectBooleanCheckbox />
                            <span class="task-name">Sales reports</span>
                            <p:commandButton icon="fa fa-check" type="button"/>
                        </li>
                        <li>
                            <p:selectBooleanCheckbox />
                            <span class="task-name">Pay the invoices</span>
                            <p:commandButton icon="fa fa-check" type="button"/>
                        </li>
                        <li>
                            <p:selectBooleanCheckbox />
                            <span class="task-name">Dinner with Tony</span>
                            <p:commandButton icon="fa fa-check" type="button"/>
                        </li>
                        <li>
                            <p:selectBooleanCheckbox />
                            <span class="task-name">Team meeting</span>
                            <p:commandButton icon="fa fa-check" type="button"/>
                        </li>
                        <li>
                            <p:selectBooleanCheckbox />
                            <span class="task-name">Plan the new theme</span>
                            <p:commandButton icon="fa fa-check" type="button"/>
                        </li>
                        <li>
                            <p:selectBooleanCheckbox />
                            <span class="task-name">Client meeting</span>
                            <p:commandButton icon="fa fa-check" type="button"/>
                        </li>
                    </ul>
                </p:panel>
            </div>

            <div class="ui-g-12 ui-md-6 ui-lg-4">
                <p:panel header="Contact Us" style="text-align:center;background:#fff;height:100%">
                    <div class="ui-g">
                        <div class="ui-g-12">
                            <p:selectOneMenu id="console">
                                <f:selectItem itemLabel="Select One" itemValue="" />
                                <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
                                <f:selectItem itemLabel="PS4" itemValue="PS4" />
                                <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
                            </p:selectOneMenu>
                        </div>
                        <div class="ui-g-12">
                            <p:inputText  placeholder="Name"/>
                        </div>
                        <div class="ui-g-12">
                            <p:inputText  placeholder="Age"/>
                        </div>
                        <div class="ui-g-12">
                            <p:inputTextarea placeholder="Message" cols="20" rows="3" autoResize="true"/>
                        </div>
                    </div>
                    <p:commandButton value="Send" icon="fa fa-check" type="button"/>
                </p:panel>
            </div>
            <div class="ui-g-12 ui-lg-4">
                <p:panel header="Contacts" style="height:100%">
                    <ul class="contacts">
                        <li>
                            <a href="#">
                                <p:graphicImage value="#{resource['omega-layout:images/avatar_1.png']}" width="35"/>
                                <span class="name">Claire Williams</span>
                                <span class="email">clare@pf-omega.com</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <p:graphicImage value="#{resource['omega-layout:images/avatar_2.png']}" width="35"/>
                                <span class="name">Jason Dourne</span>
                                <span class="email">jason@pf-omega.com</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <p:graphicImage value="#{resource['omega-layout:images/avatar_3.png']}" width="35"/>
                                <span class="name">Jane Davidson</span>
                                <span class="email">jane@pf-omega.com</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <p:graphicImage value="#{resource['omega-layout:images/avatar_4.png']}" width="35"/>
                                <span class="name">Tony Corleone</span>
                                <span class="email">tony@pf-omega.com</span>
                            </a>
                        </li>
                    </ul>
                </p:panel>
            </div>

            <div class="ui-g-12 ui-md-6">
                <h:form>
                    <div class="card">
                        <p:dataTable var="car" value="#{dtSelectionView.cars2}" selectionMode="single" selection="#{dtSelectionView.selectedCar}" rowKey="#{car.id}" reflow="true">
                            <f:facet name="header">
                                Sales List
                            </f:facet>

                            <p:column headerText="Id">
                                <h:outputText value="#{car.id}" />
                            </p:column>

                            <p:column headerText="Year">
                                <h:outputText value="#{car.year}" />
                            </p:column>

                            <p:column headerText="Brand">
                                <h:outputText value="#{car.brand}" />
                            </p:column>

                            <p:column headerText="Color">
                                <h:outputText value="#{car.color}" />
                            </p:column>
                        </p:dataTable>
                    </div>
                </h:form>
            </div>
            <div class="ui-g-12 ui-md-6">
                <div class="card">
                    <p:chart type="line" model="#{chartView.lineModel}" responsive="true"/>
                </div>
            </div>
            <div class="ui-g-12 ui-md-8">
                <p:panel header="Calendar" style="height:100%">
                    <p:schedule value="#{scheduleView.eventModel}"
                                locale="zh"
                                timeZone="GMT+8"/>
                </p:panel>
            </div>
            <div class="ui-g-12 ui-md-4">
                <p:panel header="Activity" style="height:100%">
                    <div class="activity-header">
                        <div class="ui-g">
                            <div class="ui-g-6">
                                <span style="font-weight:bold">Last Activity</span>
                                <p>Updated 1 minute ago</p>
                            </div>
                            <div class="ui-g-6" style="text-align:right">
                                <p:commandButton icon="fa fa-refresh" type="button"/>
                            </div>
                        </div>
                    </div>
                    <ul class="activity-list">
                        <li>
                            <div class="count">$900</div>
                            <div class="ui-g">
                                <div class="ui-g-6">Income</div>
                                <div class="ui-g-6">95%</div>
                            </div>
                        </li>
                        <li>
                            <div class="count" style="background-color:#f9c851">$250</div>
                            <div class="ui-g">
                                <div class="ui-g-6">Tax</div>
                                <div class="ui-g-6">24%</div>
                            </div>
                        </li>
                        <li>
                            <div class="count" style="background-color:#20d077">$125</div>
                            <div class="ui-g">
                                <div class="ui-g-6">Invoices</div>
                                <div class="ui-g-6">55%</div>
                            </div>
                        </li>
                        <li>
                            <div class="count" style="background-color:#f9c851">$250</div>
                            <div class="ui-g">
                                <div class="ui-g-6">Expenses</div>
                                <div class="ui-g-6">15%</div>
                            </div>
                        </li>
                        <li>
                            <div class="count" style="background-color:#007be5">$350</div>
                            <div class="ui-g">
                                <div class="ui-g-6">Bonus</div>
                                <div class="ui-g-6">5%</div>
                            </div>
                        </li>
                        <li>
                            <div class="count" style="background-color:#ef6262">$500</div>
                            <div class="ui-g">
                                <div class="ui-g-6">Revenue</div>
                                <div class="ui-g-6">25%</div>
                            </div>
                        </li>
                    </ul>
                </p:panel>
            </div>
        </div>
    </ui:define>
</ui:composition>